<template>
	<div>
		<div class="flex-center mb20 p20" style="border-radius: 10px; background-color: #fff">
			<el-image class="flex-shrink" :src="goodInfo.productImage" style="width: 50px; height: 50px"></el-image>
			<div class="ml10" style="text-align: left">
				<div>商品名称：{{ goodInfo.productName }}</div>
				<div>商品ID：{{ goodInfo.id }}</div>
			</div>
		</div>
		<ProTable ref="proTable" title="价格趋势详情" :columns="columns" :requestApi="getTableList">
			<template #expand="scope">
				{{ scope.row }}
			</template>
			<template #tableHeader>
				<div class="mt16">
					<el-button class="mb0" type="primary" @click="openUpdate()" v-auth="'product:price:trend:create:invoke'"> 新增价格 </el-button>
				</div>
			</template>
			<template #operation="{ row }">
				<el-button type="primary" link v-auth="'product:price:trend:edit:invoke'" @click="openUpdate(row)"> 编辑 </el-button>
				<el-divider direction="vertical" v-auth="'product:price:trend:edit:invoke'" />
				<el-button type="primary" link v-auth="'product:price:trend:delete:invoke'" @click="onDelete(row.id)"> 删除 </el-button>
			</template>
		</ProTable>
		<Update :visible="updateVisible" :row="updateRow" @handleClose="closeUpdate"></Update>
	</div>
</template>

<script setup lang="tsx" name="goodPriceDetail">
import { onMounted, ref, reactive, computed, nextTick } from 'vue';
import dayjs from 'dayjs';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useDownload } from '/@/hooks/useDownload';
import ProTable from '../../../../components/ProTable/index.vue';
import { ProTableInstance, ColumnProps } from '../../../../components/ProTable/interface';
import { fetchPriceList, fetchDelPrice } from '/@/api/goods';
import { fenToYuan } from '/@/utils/commonFunction';
import { Session } from '/@/utils/storage';
import Update from './dialog/update.vue';

const goodInfo = ref<any>({});

// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref<ProTableInstance>();

const handleParams = (params: any) => {
	let data = {
		...params,
		productId: Session.get('goodInfo').id,
	};
	if (data.paramTime) {
		data.startTime = dayjs(data.paramTime[0]).format('YYYY-MM-DD');
		data.endTime = dayjs(data.paramTime[1]).format('YYYY-MM-DD');
		delete data.paramTimeType;
		delete data.paramTime;
	}
	return data;
};

// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
// 默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getTableList"
const getTableList = (params: any) => {
	const data = handleParams(params);
	return fetchPriceList(data);
};

// 表格配置项
const columns: ColumnProps<any>[] = [
	{
		prop: 'id',
		label: '价格ID',
		minWidth: 180,
	},
	{
		prop: 'price',
		label: '价格（元）',
		minWidth: 160,
		render: (scope) => {
			return <span>{fenToYuan(scope.row.price)}</span>;
		},
	},
	{
		prop: 'priceDate',
		label: '价格日期',
		minWidth: 120,
	},
	{
		prop: 'createTime',
		label: '创建时间',
		minWidth: 160,
	},
	{ prop: 'operation', label: '操作', fixed: 'right', width: 120, align: 'left' },
];

const onDelete = (id: number) => {
	ElMessageBox.confirm('确定删除此数据？', '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(async () => {
			const res = await fetchDelPrice({ id });
			if (res.code == 200) {
				ElMessage.success('删除成功');
				proTable.value?.getTableList();
			} else {
				ElMessage.error(res.msg);
			}
		})
		.catch(() => {});
};

const updateVisible = ref(false);
const updateRow = ref();

const openUpdate = (row?: any) => {
	updateVisible.value = true;
	updateRow.value = row;
};

const closeUpdate = () => {
	updateVisible.value = false;
	updateRow.value = undefined;
	proTable.value?.getTableList();
};

onMounted(() => {
	goodInfo.value = Session.get('goodInfo');
});
</script>

<style lang="scss">
.demo-tabs {
	.el-tabs__header {
		margin-bottom: 0;
	}
}
</style>
